<template>
  <el-card shadow="always" >
    <!---- -- -- -- 头部-- -- -- -- -- -- -->
    <div slot="header">
      <!-- 路径导航 -->
       <Breadcrumb/>
    </div>
     <!---- -- -- -- 内容区域-- -- -- -- -- -- -->
     <!-- 绘制的区域 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <el-button type="primary" size="default" @click="changeData">修改数据</el-button>

  </el-card>
</template>

<script>
// 导入
import * as echarts from 'echarts'
import lodash from 'lodash'
export default {
  name: 'Reports',
  data () {
    return {
      // 基础的数据
      options: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      },
      myChart: null // 图表对象
    }
  },
  async mounted () { // 挂载完成之后，存在真实的DOM节点！
    const { data: res } = await this.$axios.get('/reports/type/1')
    if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
    const resultOptions = lodash.assign(this.options, res.data) // 合并一个数据源
    // 合并数据对象
    this.myChart = echarts.init(document.getElementById('main')) // 初始化一个echarts实例对象
    // 设置配置为信息
    this.myChart.setOption(resultOptions)
  },
  methods: {
    changeData () {
      // 新数据
      const data = {
        legend: { data: ['华东', '华南', '华北', '西部', '其他'] },
        yAxis: [{ type: 'value' }],
        xAxis: [
          {
            data: [
              '2017-12-27',
              '2017-12-28',
              '2017-12-29',
              '2017-12-30',
              '2017-12-31',
              '2018-1-1'
            ]
          }
        ],
        series: [
          {
            name: '华东',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [1999, 3111, 2100, 3565, 3528, 6000]
          },
          {
            name: '华南',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [5090, 2500, 34500, 6000, 6400, 7800]
          },
          {
            name: '华北',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [6888, 4000, 803, 12321, 1328, 12984]
          },
          {
            name: '西部',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [9991, 413, 7777, 12903, 3098, 14028]
          },
          {
            name: '其他',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [15212, 5800, 10241, 14821, 15982, 14091]
          }
        ]
      }
      const resultOptions = lodash.assign(this.options, data) // 合并一个数据源
      this.myChart.setOption(resultOptions) // 更新只要调用一下setOption即可
    }
  }
}
</script>

<style>

</style>
